import React, { Key, useEffect, useState } from "react";
import { Row, Col, Card, Tree, Tag, Pagination, Table , Button} from "antd";
import { useNavigate, useParams } from "react-router-dom";
//api 请求
import {
  gtHosDepartmentListRequest,
  getHosScheduleRuleRequest,
  findScheduleListRequest,
} from "@/api/hospital/hospitalList";
//api 请求类型限制
import {
  hosDepartmentListType,
  bookingScheduleListType,
  findScheduleListType
} from "@/api/hospital/model/hospitalListType";

export default function HospitalSchedule() {
  const naviGate = useNavigate()
  //定义一个控制treeData的state
  const [department, setDepartment] = useState<hosDepartmentListType>([]);
  //定义一个时间排班规则的当前页码
  const [page, setPage] = useState(1);
  //定义一个时间排班规则的每页条数
  const [limit, setLimit] = useState(3);
  //定义当前科室的排班规则
  const [scheduleRule, setScheduleRule] = useState<bookingScheduleListType>([]);
  //定义当前科室的排班规则总条数
  const [total, setTotal] = useState(0);
  //定义表格的数据
  const [sourceData, setSourceData] = useState<findScheduleListType>([]);
  const { hoscode } = useParams();
//   const [depCode , setDepCode] = useState()

    //1.定义医院科室列表的函数
    const getDepartmentList = async ( ) => {
        const re = await gtHosDepartmentListRequest(hoscode as string);
        setDepartment(re);
        
        return re
      };

    //2.定义一个请求科室排班的函数
    const getScheduleRule = async (depCode:string ) => {
        const re = await getHosScheduleRuleRequest({
          page: page,
          limit: limit,
          hoscode: hoscode as string,
          depcode: depCode,
        });
        setTotal(re.total);
        setScheduleRule(re.bookingScheduleList);
        return re
      };

      //3.定义一个请求排班详情的函数
      const findScheduleList = async (workDate:string, depCode:string) => {
        const re = await findScheduleListRequest({
            hoscode : hoscode as string,
            depcode: depCode,
            workDate: workDate,
        })
            setSourceData(re);
    }     

  //1.组件初始加载的时候发送请求
  useEffect(() => {
    const hospitalDepartment = async () => {
        //1.请求科室列表 得到科室列表的数据
       const departmentList =  await getDepartmentList();
       //2.根据科室数据获取初始的科室信息(默认第一个)
       const initDepCode = (departmentList[0].children as hosDepartmentListType)[0].depcode;
       //3.把初始的科室信息传递给 请求排班列表的函数,得到排班列表
       const scheduleRule = await getScheduleRule(initDepCode);
        //4.根据排班列表,得到初始的排班列表的时间(默认第一个)
       const initWorDate = scheduleRule.bookingScheduleList[0].workDate
        //5.根据排班列表的初始时间 请求 详细信息
       await findScheduleList(initWorDate,initDepCode)
    }

    hospitalDepartment()
    
  }, [page,limit]);

  //1.改变页码的事件回调函数
  const btnChangSchedule = async (page: number, limit: number) => {
    setPage(page);
    setLimit(limit)

  };
  const btnReturn = () => {
    naviGate(-1)
  }

  //2.点击tree的事件回调函数
  const treeSelectHandle = (depCode:Key[],a:any) => {

    
  } 

  //3.点击事件的时间回调函数
  const acquisitionTime = (workDate:string) => {
    return () => {
        // setWorkDate(workDate)
    }
  }


  //table结构
  const columns = [
    {
      title: "序号",
      render(_: any, __: any, index: number) {
        return index + 1;
      },
    },
    {
      title: "职称",
      dataIndex: "title",
    },
    {
      title: "号源时间",
      dataIndex: "workDate",
    },
    {
      title: "可预约数",
      dataIndex: "availableNumber",
    },
    {
        title: "剩余预约数",
        dataIndex: "reservedNumber",
      },
    {
      title: "挂号费用",
      dataIndex: "amount",
    },
    {
      title: "擅长技能",
      dataIndex: "skill",
    },
  ];
  const treeStyle = {
    border: "1px solid #000",
    height: "480px",
    overflow: "auto",
  };
  return (
    <Card>
      <p>选择:北京协和医院/多发性硬化专科门诊/2022-04-08</p>
      <Row gutter={20}>
        <Col span={5}>
          <div>
            <Tree
              treeData={department as []}
              style={treeStyle}
              fieldNames={{ title: "depname", key: "depcode" }}
              expandedKeys={["a4e171f4cf9b6816acdfb9ae62c414d7"]}
            //   selectedKeys= {}
              onSelect = {treeSelectHandle}
            />
          </div>
        </Col>
        <Col span={19}>
          <div style={{ marginBottom: "20px" }}>
            {scheduleRule.map((item) => {
              return (
                <Tag key={item.workDate} onClick = {acquisitionTime(item.workDate)} style={{ cursor: "pointer" }}>
                  <p>{item.workDate}</p>
                  <p>{item.availableNumber}/{item.reservedNumber}</p>
                </Tag>
              );
            })}
          </div>
          <Pagination
            current={page}
            pageSize={limit}
            total={total}
            onChange={btnChangSchedule}
          />

          <Table 
          columns={columns} 
          style={{ marginTop: "20px" }}
          dataSource={sourceData}
          rowKey = "id"
          bordered
          pagination = {false}
          
          ></Table>
          <Button onClick={btnReturn} style = {{marginTop : "30px"}} >
            返回
          </Button>
        </Col>
      </Row>
    </Card>
  );
}
